<div class="relative overflow-hidden">
    <div class="absolute inset-y-0 h-full w-full" aria-hidden="true">
        <svg class="absolute right-full translate-y-1/3 translate-x-1/4 transform sm:translate-x-1/2 lg:translate-x-full" width="404" height="784" fill="none" viewBox="0 0 404 784">
            <defs>
                <pattern id="e229dbec-10e9-49ee-8ec3-0286ca089edf" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                    <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
                </pattern>
            </defs>
            <rect width="404" height="784" fill="url(#e229dbec-10e9-49ee-8ec3-0286ca089edf)" />
        </svg>
        <svg class="absolute left-full -translate-y-3/4 -translate-x-1/4 transform sm:-translate-x-1/2 md:-translate-y-1/2 lg:-translate-x-3/4" width="404" height="784" fill="none" viewBox="0 0 404 784">
            <defs>
                <pattern id="d2a68204-c383-44b1-b99f-42ccff4e5365" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                    <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
                </pattern>
            </defs>
            <rect width="404" height="784" fill="url(#d2a68204-c383-44b1-b99f-42ccff4e5365)" />
        </svg>
    </div>

    <div class="relative pt-6">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 text-center">
            <%= link "← All schemas", class: " p-1 text-sm md:p-2 md:text-base max-w-min rounded-lg hover:bg-slate-200", to: Routes.gallery_path(@conn, :index)%>
            <h1 class="mt-6 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl"><%= @sample.project.name %> database schema</h1>
            <p class="mx-auto mt-3 max-w-md text-base text-gray-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl"><%= @sample.description %></p>
        </div>
    </div>

    <div class="relative mx-auto my-8 max-w-md sm:flex sm:justify-center">
        <a href={@sample.website} target="_blank" rel="noopener noreferrer" class="bg-white hover:bg-gray-50 text-indigo-600 flex w-full items-center justify-center rounded-md shadow border border-transparent px-8 py-3 text-base font-medium md:py-4 md:px-10 md:text-lg">Visit site</a>
        <!-- FIXME: allow to import a project with its url or its id -->
        <a href={"#{Routes.elm_path(@conn, :new)}?sample=#{@sample.slug}"} class="bg-indigo-600 hover:bg-indigo-700 text-white mt-3 sm:mt-0 sm:ml-3 flex w-full items-center justify-center rounded-md shadow border border-transparent px-8 py-3 text-base font-medium md:py-4 md:px-10 md:text-lg">Try it out</a>
    </div>

    <div class="relative mx-auto max-w-7xl px-4 sm:px-6">
        <iframe width="100%"
                height="800px"
                src={"#{Routes.elm_path(@conn, :embed)}?project-id=#{@sample.project.id}&mode=full"}
                title={"#{@sample.project.name} diagram"}
                frameborder="0"
                allowtransparency="true"
                allowfullscreen="true"
                scrolling="no"
                class="relative rounded-lg shadow-lg overflow-hidden"></iframe>
    </div>

    <div class="relative overflow-hidden mt-16 pt-6 bg-white">
        <div class="relative px-4 sm:px-6 lg:px-8">
            <div class="prose prose-lg prose-indigo mx-auto text-gray-500">
                <%= raw @sample.analysis |> Markdown.preprocess(Routes.gallery_path(@conn, :show, @sample.slug)) |> Markdown.to_html |> Result.or_else("") %>
            </div>
        </div>
    </div>

    <div class="relative bg-gray-50 px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28">
        <div class="absolute inset-0">
            <div class="h-1/3 bg-white sm:h-2/3"></div>
        </div>
        <div class="relative mx-auto max-w-7xl">
            <div class="text-center">
                <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Explore other schemas</h2>
                <p class="mx-auto mt-3 max-w-2xl text-xl text-gray-500 sm:mt-4">
                    Because learning and inspiration is never finished! Visit these other schemas or <a href={Routes.gallery_path(@conn, :index)} class="text-indigo-600 hover:underline">go back</a> to the full list.
                </p>
            </div>
            <div class="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
                <%= for sample <- @related do %>
                    <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
                        <div class="flex-shrink-0">
                            <a href={Routes.gallery_path(@conn, :show, sample.slug)}><img class="h-48 w-full object-cover" src={sample.banner} alt={"#{sample.project.name} banner"}></a>
                        </div>
                        <div class="flex flex-1 flex-col justify-between bg-white p-6">
                            <div class="flex-1">
                                <p class="text-sm font-medium text-indigo-600">
                                    <a href={Routes.gallery_path(@conn, :show, sample.slug)}><%= sample.project.nb_tables %> tables</a>
                                </p>
                                <a href={Routes.gallery_path(@conn, :show, sample.slug)} class="mt-2 block">
                                    <p class="text-xl font-semibold text-gray-900"><%= sample.project.name %></p>
                                    <p class="mt-3 text-base text-gray-500"><%= sample.description %></p>
                                </a>
                            </div>
                        </div>
                    </div>
                <% end %>
            </div>
        </div>
    </div>

    <div class="relative max-w-3xl mt-6 px-6 pb-24 mx-auto space-y-12">
        <%= render AzimuttWeb.BlogView, "_blog_footer.html" %>
    </div>
</div>
